import React, { Component } from 'react'
import { View, StyleSheet, TouchableNativeFeedback } from 'react-native'
import { Circle } from 'react-native-progress'
import MyIcon from '../utils/MyIcon'
import { mainColor } from '../utils/const'

const styles = StyleSheet.create({
  icon: {
    position: 'absolute',
    top: '50%',
    left: '50%'
  }
})

export default class ProgressButton extends Component {
  render() {
    let { size = 30, onClick, progress } = this.props
    return (
      <TouchableNativeFeedback onPress={onClick}>
        <View style={{ position: 'relative', width: size, height: size }}>
          <Circle progress={progress/100} borderWidth={0} size={size} color={mainColor} unfilledColor="#CCCCCC"/>
          {
            this.props.playing ?
              <MyIcon style={{...styles.icon, transform: [{translateX: -size*0.28}, {translateY: -size*0.28}]}} name='stop' size={size*0.56} color={mainColor} /> :
              <MyIcon style={{...styles.icon, transform: [{translateX: -size*0.33}, {translateY: -size*0.33}]}} name='play' size={size*0.66} color="#CCCCCC" />
          }
        </View>
      </TouchableNativeFeedback>
    )
  }
}